<template>
 <div class="account pd_40">
   <p class="mg_b30"><el-button @click="moreUsermaAlert=true" type="primary">添加账号</el-button></p>
   <div>
     <el-table
      :data="tableData"
      stripe
      style="width: 100%">
      <el-table-column
        prop="date"
        width="150"
        label="管理员账户">
      </el-table-column>
      <el-table-column
        prop="name"
        width="150"
        label="姓名">
      </el-table-column>
      <el-table-column
        width="150"
        prop="address"
        label="担当岗位">
      </el-table-column>
      <el-table-column
        width="150"
        prop="name"
        label="隶属主管">
      </el-table-column>
      <el-table-column
        prop="address"
        width="200"
        label="最近登陆时间">
      </el-table-column>
      <el-table-column
        prop="address"
        width="150"
        label="使用状态">
      </el-table-column>
      <el-table-column
        width="130"
        label="权限配置">
        <template slot-scope="scope">
          <el-button  type="primary" size="small">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        width="280"
        label="操作">
        <template slot-scope="scope">
          <div class="nowrap">
            <el-button @click="administration(1)" type="primary" size="mini">授于角色</el-button>
            <el-button @click="deleteOpen" type="primary" size="mini" >重置密码</el-button>
            <el-button @click="administration(2)" type="primary" size="mini">管理</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
   </div>
  <div class="block fec mg_t30">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[10]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="40">
    </el-pagination>
  </div>

  <!--重置密码alert-->
  <el-dialog
    title="输入新的登录密码"
    :visible.sync="centerDialogVisible"
    width="20%"
    center>
    <div class="mg_20 fbc fwrap f_13">
      <el-input type="text" v-model.trim="password" placeholder="请输入"></el-input>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" size="small" @click="centerDialogVisible=false">取消</el-button>
      <el-button type="primary" size="small" @click="resetPassword">确定</el-button>
    </span>
  </el-dialog>

  <!--管理/授权alert-->
  <el-dialog
    class="dialogs"
    :title="flag?'账户管理':'授予角色/岗位'"
    :visible.sync="administrationLabel"
    width="20%"
    center>
    <div v-if="flag==true" class="fbc fwrap">
      <el-button @click="index=1" :type="index==1?'primary':''" size="small">删除账号</el-button>      
      <el-button @click="index=2" :type="index==2?'primary':''" size="small">停用账号</el-button>      
      <el-button @click="index=3" :type="index==3?'primary':''" size="small">恢复账号</el-button>      
    </div>
    <div v-if="flag==false" class="fsc fwrap">
      <el-button @click="index2=1" :type="index2==1?'primary':''" size="small">小编</el-button>      
      <el-button @click="index2=2" :type="index2==2?'primary':''" size="small">总编</el-button>      
      <el-button @click="index2=3" :type="index2==3?'primary':''" size="small">客服</el-button>
      <el-button @click="index2=4" :type="index2==4?'primary':''" size="small">测试</el-button>      
      <el-button @click="index2=5" :type="index2==5?'primary':''" size="small">管理员</el-button>      
      <el-button @click="index2=6" :type="index2==6?'primary':''" size="small">超级管理员</el-button>      
      <el-button @click="index2=7" :type="index2==7?'primary':''" size="small">全选</el-button>      
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="administrationLabel=false">取消</el-button>
      <el-button type="primary" size="small" @click="administrationRole">确定</el-button>      
    </span>
  </el-dialog>

  <!--添加账户alert-->
  <el-dialog
    title="添加管理员账户"
    :visible.sync="moreUsermaAlert"
    width="26%"
    center>
    <div class="mg_r20">
      <el-form :model="form" :rules="rules" ref="form" label-width="110px" class="demo-ruleForm">
        <el-form-item label="管理员姓名" prop="name">
          <el-input v-model="form.name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="隶属主管" prop="charge">
          <div class="fsc">
            <el-select v-model="form.charge">
              <el-option label="区域一22" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
            <el-form-item label="岗位" prop="post">
              <el-select v-model="form.post">
                <el-option label="区域一3333" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-form-item>
        <el-form-item label="管理员账号" prop="code">
          <el-input v-model="form.code" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="登录密码" prop="possword">
          <el-input v-model="form.possword" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="再次输入密码" prop="posswordTo">
          <el-input v-model="form.posswordTo" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button  @click="resetForm('form')">重置</el-button>
      <el-button type="primary" @click="submitForm('form')">确定</el-button>
    </span>
  </el-dialog>
 </div>

 
</template>
<script>
export default {
  data() {
    return {
      flag: false,  //判断管理/授权
      index: 1,    //dialog里button
      index2: 1,   //dialog里button
      password: '',  //密码
      administrationLabel:false,
      value: '',
      input2: '',
      input3: '',
      value4: '',
      value1: '',
      currentPage4: 4,
      centerDialogVisible: false,
      moreUsermaAlert: false,
      form: {
        name: '',
        charge: '',
        post: '',
        code: '',
        possword: '',
        posswordTo: '',
      },
       rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          charge: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          post: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          code: [
            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'blur' }
          ],
          possword: [
            { required: true, message: '请选择活动资源', trigger: 'blur' }
          ],
          posswordTo: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ]
        },
      
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区 弄'
        }]
    }
  },
  methods: {
    administrationRole() {   //管理/授权alert确定
      if(this.flag){
        if(index==1) {

        }
      }else{
        if(index2==1) {
          
        }
      }
    },
  
    administration(num) {     //点击管理/授权
      this.administrationLabel = true;
      if(num==1) {
        this.flag = false;
      }else{
        this.flag = true
      }
    },

    resetPassword() {      //重置表单
      if(!this.password) {
        this.centerDialogVisible = false;
        this.$message({
          type: 'success',
          message: '修改成功'
        })
      }
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    deleteOpen() {     //重置密码
      this.$confirm('确定要重置密码', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.centerDialogVisible = true
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '重置取消'
        });          
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
  
}
</script>
<style scoped lang="less">
 .dialogs .el-button {
    margin-top: 20px;
    margin-left: 10px;
  }
</style>

